<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>button</title>
  <link rel="stylesheet" href="../inc/layui/css/layui.css">
  <link rel="stylesheet" href="../css/comm.css">
</head>

<body>
  <header>
    <div class="layui-form-item">
      <div style="float: left;">
        <button class="layui-btn layui-btn-add" onclick="add()">新增</button>
        <button class="layui-btn layui-btn-up" onclick="update()">修改</button>
        <button class="layui-btn layui-btn-del" onclick="del()">删除</button>
        <button class="layui-btn layui-btn-del" onclick="reference()">刷新</button>
      </div>
    </div>
  </header>
  <section>
    <table class="layui-hide" id="table" lay-filter="table"></table>
  </section>
</body>
<script type="text/html" id="formTpl">
    <div id="form" class="layui-form">
        <input type="hidden" id="btnId" name="btnId"/>
        <div class="layui-form-item" style="margin-top: 20px;;width: 90%">
            <label class="layui-form-label">按钮名称</label>
            <div class="layui-input-block">
                <!--<select name="btnType" lay-verify="required" lay-filter="btnType">
                    {{# layui.each(d.data, function(index, item){ }}
                    <option value="{{item.fun}}">{{item.name}}</option>
                    {{# }); }}
                </select>-->
                <input id="btnName" name="btnName" type="text" lay-verify="required" autocomplete="off"
                       placeholder="按钮名称" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;width: 90%">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input id="btnType" name="btnType" type="text" lay-verify="required" autocomplete="off"
                       placeholder="即为方法名，不可重复" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">按钮颜色</label>
            <div class="layui-input-inline">
                <input id="btnColor" name="btnColor" type="text" lay-verify="required" autocomplete="off"
                       placeholder="请选择按钮颜色" class="layui-input"/>
            </div>
            <div class="layui-input-inline">
                <div id="selcolor"></div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;width: 90%">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type = "number" id="sort" name="sort" type="text" lay-verify="required" autocomplete="off" placeholder="排序"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;;width: 90%">
            <label class="layui-form-label">按钮图标</label>
            <div class="layui-input-block">
                <input id="btnIcon" name="btnIcon" type="text"   autocomplete="off" placeholder="请选择按钮图标"
                       class="layui-input"/>
            </div>
        </div>
        <div class="center" style="text-align: center;">
            <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub">保存</button>
            <button class="layui-btn layui-btn-primary" id="closeform">取消</button>
        </div>
    </div>
</script>
<script type="text/javascript" src="../inc/layui/layui.js"></script>
<script type="text/javascript" src="../inc/g.js"></script>
<script type="text/javascript" src="../inc/area.js"></script>
<script type="text/javascript">
  var buttonList = [{
    fun: "add",
    name: "新增"
  }, {
    fun: "update",
    name: "修改"
  }, {
    fun: "del",
    name: "删除"
  }, {
    fun: "reference",
    name: "刷新"
  }, {
    fun: "enable",
    name: "启用"
  }, {
    fun: "disable",
    name: "禁用"
  }, {
    fun: "import",
    name: "导入"
  }, {
    fun: "export",
    name: "导出"
  }, {
    fun: "search",
    name: "搜索"
  }, {
    fun: "commend",
    name: "推荐"
  }, {
    fun: "vipPrice",
    name: "会员价"
  }, {
    fun: "getList",
    name: "领取列表"
  }, {
    fun: "useList",
    name: "使用列表"
  }, {
    fun: "activeGoods",
    name: "活动商品"
  },
  {
    fun: "edit",
    name: "编辑"
  }]

  //加载页面
  function pageload() {
    //初始化列表
    Comm.table.render({
      elem: '#table',
      url: config.root + '/admin/menu/button/list', //列表请求接口
      where: { //接口参数
      },
      cols: [
        [{
          checkbox: true
        }, {
          field: 'btnName',
          title: '按钮名称'
        }, {
          field: 'btnType',
          title: '按钮方法'
        }, {
          field: 'btnIcon',
          title: '按钮Icon'
        }, {
          field: 'btnColor',
          title: '按钮预览',
          templet: function (d) {
            return '<button class="layui-btn layui-btn-sm layui-btn-' + d.btnType + '" style="background-color: ' + d.btnColor + '">' + d.btnName + '</button>'
          }
        }]
      ],
      id: 'table',
      height: 'full-' + ($("hader").height()), //计算table底部距离
    });

    //监听table列表里按钮点击事件
    Comm.table.on('tool(table)', function (obj) {
      if (obj.event == 'delete') {

      }
    });
  }


  //新增
  function add() {
    Comm.laytpl($("#formTpl").html()).render({
      data: buttonList
    }, function (html) {
      //多窗口模式，层叠置顶
      layer.open({
        type: 1,
        title: "新增按钮",
        area: ['600px', '400px'],
        maxmin: true,
        content: html,
        success: function (layero) {
          Comm.form.verify();
          Comm.form.render();
          //表单赋值
          Comm.colorpicker.render({
            elem: '#selcolor',
            color: '#1c97f5',
            done: function (color) {
              $('#btnColor').val(color);
            }
          });
          //监听指定开关
          Comm.form.on('submit(sub)', function (data) {
            data.field.enable = 1;
            /* for (var i = 0; i < buttonList.length; i++) {
                 if (buttonList[i].fun == data.field.btnType) {
                     data.field.btnName = buttonList[i].name;
                     data.field.sort = i;
                 }
             }*/
            AJAX.POST("/admin/menu/button/add", data.field, function (d) {
              if (d.code == 1) {
                layer.closeAll();
                layer.msg("新增成功!", {
                  icon: 1
                });
                //执行重载
                reference();
              } else {
                layer.msg(d.msg, {
                  icon: 5
                })
              }
            }, true, true)
          });
          $("#closeform").click(function () {
            layer.closeAll();
          })
        }
      });
    });

  }

  //修改
  function update() {
    var d = Comm.table.checkStatus('table'); //获取选中的数据
    if (d.data.length != 1) {
      Comm.msg("请选择一条数据", 5)
      return;
    }
    d.data[0].data = buttonList
    Comm.laytpl($("#formTpl").html()).render(d.data[0], function (html) {
      //多窗口模式，层叠置顶
      layer.open({
        type: 1,
        title: "修改按钮",
        area: ['600px', '400px'],
        maxmin: true,
        content: html,
        success: function (layero) {

          Comm.SetData(d.data[0])
          Comm.form.verify();
          Comm.form.render();
          //表单赋值
          Comm.colorpicker.render({
            elem: '#selcolor',
            color: '#1c97f5',
            done: function (color) {
              $('#btnColor').val(color);
            }
          });
          //监听指定开关
          Comm.form.on('submit(sub)', function (data) {
            data.field.enable = 1
            for (var i = 0; i < buttonList.length; i++) {
              if (buttonList[i].fun == data.field.btnType) {
                data.field.btnName = buttonList[i].name;
                data.field.sort = i;
              }
            }
            AJAX.POST("/admin/menu/button/update", data.field, function (d) {
              if (d.code == 1) {
                layer.closeAll();
                layer.msg("修改成功!", {
                  icon: 1
                });
                //执行重载
                reference();
              } else {
                layer.msg(d.msg, {
                  icon: 5
                })
              }
            }, true, true)
          });
          $("#closeform").click(function () {
            layer.closeAll();
          })
        }
      });
    });
  }


  //刷新
  function reference() {
    Comm.table.reload('table');
  }

  layui.use('colorpicker', function () {
    Comm.colorpicker = layui.colorpicker;
  })


  //批量删除
  function del() {
    var d = Comm.table.checkStatus('table'); //获取选中的数据
    if (d.data.length != 1) {
      Comm.msg("请选择一条数据", 5)
      return;
    }
    Comm.confirm('确定选择删除数据', function () {
      AJAX.POST('/admin/menu/button/delete', {
        btnId: d.data[0].btnId
      }, function (d) {
        if (d.code == 1) {
          layer.msg("删除成功!", {
            icon: 1
          });
          //执行重载
          reference();
        } else {
          layer.msg("删除失败!", {
            icon: 5
          })
        }
      })
    })
  }
</script>

</html>